<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @font-face {font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_1076204_n7ltrmbwcm8.eot?t=1553770547913'); /* IE9 */
  src: url('//at.alicdn.com/t/font_1076204_n7ltrmbwcm8.eot?t=1553770547913#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAjkAAsAAAAAETAAAAiWAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEZAqTEI9bATYCJAM8CyAABCAFhG0HgRsblA4jESaUlEv2VwncIbn1aHhm5EdSDHKuJGnpdLODuaOwFWcFa/Lh8bT383+FpQPbDnJHHKQelR1g5AAkAHzfpWZsggTQLRiatOWTO/b3uCU/WVk9AEDAESq2tQPicx+Y7IHaHabLoHU4cdpXHW0yn+qRF1doN1hjVUvWFxUgy96ptVZd0kfFPBQSKVDSne/e7cv+YS+aMNHGkBhCYogkMUnizUOBTAoJCDG3XjLEK1O8uLwYpwMBoIYZYSC5+aU1oQSDFQh1OrZr0wzKGQlsTTiBUiuP7MpAJkEGJTeaOwdgYvH75A1iiBLgIKOwZ6psndcSNlElSQRJqCGtgnA8I4DmXgAFEAaAAWRd1LwCtIJhhaiONWboB8ARRj0qE1WiSXQXA8R4sUxsIw4SV0lS/SwcRDfRv2trJHB00a5whycl/+JpoAYHBZTQQwc5GFSQQQsQOUTU4r2rRA+IqpAABBAdMDR9xIOhBpnA4EBuYChA7mAoQf7Qx0MBYOhA8WDIQWVgMFAbBJwbDQJDBlpFPGjBloD5rsyAIWtsBhALUJlkv4MN6gHIXDgBLZSBgVNIC6iu9MRot9DGq5hKrvMiHszVUWsMLgb1t1qhm1Q36HTOWncmj5OmNdG636QBWrwLwrrxKzpBY4eXDI+R9b4otrm0cGXW+/glL3gjhVbHJabfXbrtoTAO+z7cDP4eKoOl1zHuUBf7XlQoPfhD/4r/s9k07JJkAOYP9+17dYaHLBKTdMLclbRsc7nTjUePNB2/LWWrUm1xbGpt2AhQh3sQhJz52KFcuAB+k9RB3G4+FvIlR5xgUhBS1vt3Vfrx/9nlRXc86jqCID5IJ5BBFhoZnwAwhaXyq7+Vo/tZtBjD7gi7mKwHeHQSoM6CsmBiQWIsnFaZPtAVbtyOo5Mimr6bTQxwxyLqyjpv62YGdsfrX8cmKT5VX7GIG0hRqbpb2T5t/JBo7NvqR6ulPHz55E2QtzJVyn33NPBsLOMtePtSa3ncAYii1B78mVFxU87Kvn8376aoeAjH1bcC1BU+JKnUPUh1E099zhQ+84xJuJVwwotJ33iQG2c2amZ2jLFo64Qr2tr54iQ78ayFfMbf7vTDn0pK/S5e7j9e8UHOGVA7v8ab3+t14bfD/zSXjbK97ejxuMNqNXSH+T8Wqkm13+55s7IsVf7o3SyCiE/MdJtbLKILGCIY5BYuT5a1G3s1DQU/+K/M+WLBYbYWcD8UKo5zvuSVjFSrUyjgQudL8Xp6CX80owYznb6oKvYRZ4R7XzOMmuRo50l6+Fh6DdiUnIodiam0FuiL0+rbbhrlPmvE6Nnus8/Pcps1cvRo99HmgFnzttEz5zVusq9ttCzMsjzs/uUl1iO2UUiMshvpCj6/udui8+qc3oyp7mnMHq3V79TrA3DKbmPWosZRNqHSWmwtNTLnyVprVIvJzsxYZmTkoE1w2hO0J5i2Gf8at/6SWtbOee5waHXLGBAY5E/q1Yblqe9m+vYt3ewIJdMC+uYt2yz4zdtqwfuuXNG8d36vyV/ggfMDDZAevftkveTludtndB3l6uc+cnV3Ra0uglBL0XXkrMkm5f71mYcyMxfpHPSPHukVD9aX4PHMZbTri0NnOI8oCcfquXwv4/UQ0puvxfcmIdeNLBKyelCNWttJb6PUzSdxtaQy6e3Xm2/GZ/lkddOG6K+kGNY0jUqkGW8FGU0LzxlIUGWZunX1HAdb9Md8z2oelhpeh7Jti6MH3aApUZrB73su7O3zuLaX76Mj5bqDraxDl2z8W8WtXUcFWrV2bRUncGZxWkWFtesEWw9uzhwuBd0hoSYEoAcNoEnYzX78YIDdDRJeG2iWpq+kDx5QwEol4XVtRLfwrpmolVykSHQulqr5+J1+p/79o7BH702jdxjq5yJ9YWH2nS7/m25Yrel/F3u7fVN0NslXUL1036b/rv83sRkkh+rFlgKz3e5VYCle6ok8pd1e4FVsWVZkMdrt5kjYMkuRW+dFzEWWalKXCxdoCuY0SPhJs5z+BxSzjbMVcqOQMptO0Jf42PK98p02yovWvu9ccalBybl1iW1HzejqE8M0Pdf1fsUNnTsjc5WXze0ztFLvF+rI0rFs9U+Jhp7Nre384PgJejt8a7sZyU+o7Ebivhn7Em/I5ISZG6V+2pL2qczMiOv/n3k/Q4J78EmWew8oLSkdOHV5t9naA/558Rt0G7KfG91t+fdsQA5KcbRoUBREnQMybjXVvx3gTIlc5RPvo5ITvrVfa36mIazUdpD9/s1ScLBBwk8Ol1lmsRRS09VRrVrNdot1nV2vHm+aVS7uCenI+6Zg8H8AFC5wmDYpiAwd++muyB3gbgPSPYupX8z4gGar4qWa1EOxk0hbwVPbwiQUYw2nPRTvTaG8QrCQVrk/cTfrD3GtbQBAvbiMuupqaHqt2rsmhrRvSs0f7YxbR07HqksShv2LoAQHayFAPTSbkZ8+P+AUGoYC1tAhE0EfSWXAJKiLOQDqSYd6qJ3Hg/NpnLZmatsap0kkBwW8II15+0GGd1ikDBrEQTnemZFqhKJgbw1M6AYKwlQAQjCcSAIjNkZy0OMgpHifhwzv+5EyOOMdkBNMaKQatYnpkBoEzCWdLgKjcHR7U7I8e5+rp7LuN8J9NCJcst4/pCSeqa2aUdkXZsgxtiiP0Kl68sITfZpNMI5MWbiH1SpSms917dtbVpanxQk5AqNZbEe6vdMny7OfXk8LP/+NcB+NrOmyn/4fUtL8Sa0qNVu4f4nzVl1eS+PyCJ1UjJ5Ca+GJ9ClGjK6YSTm+Ug+rleIehfmsWoby24rV+TXT567Rh9iN3XmSRudgcHJx8/xHvE6QFJO1aeWSHkrkbI3oVlKIujbObSJP2DmMUKym92nmnwm0b6vilsVB1qGyPYxsjb5VYbNvzqGsrLpx/JwXCwA=') format('woff2'),
  url('//at.alicdn.com/t/font_1076204_n7ltrmbwcm8.woff?t=1553770547913') format('woff'),
  url('//at.alicdn.com/t/font_1076204_n7ltrmbwcm8.ttf?t=1553770547913') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('//at.alicdn.com/t/font_1076204_n7ltrmbwcm8.svg?t=1553770547913#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-edit:before {
  content: "\e609";
}

.icon-shopcart:before {
  content: "\e613";
}

.icon-right:before {
  content: "\4a200";
}

.icon-add:before {
  content: "\e64d";
}

.icon-home:before {
  content: "\e67e";
}

.icon-delete:before {
  content: "\e635";
}

.icon-my:before {
  content: "\e619";
}

.icon-noSelected:before {
  content: "\e61a";
}

.icon-order:before {
  content: "\e667";
}

.icon-dec:before {
  content: "\e612";
}

.icon-location:before {
  content: "\e611";
}

.icon-shop:before {
  content: "\e6a8";
}

.icon-selected:before {
  content: "\e626";
}

.icon-down:before {
  content: "\e625";
}
div {
  width: 110px;
  height: 110px;
  border-radius: 12px;
  border: 1px red solid;
  background: url('./zm.png') no-repeat;
}
.all {
  width: 400px;
  height: 400px;
  border-radius: 12px;
  border: 1px red solid;
  background: url('./zm.png') no-repeat;
  background-size: 100% 100%;
}
.a {
  background-position: 4px -7px;
}
.b {
  background-position: -115px -7px;
}
.c {
  background-position: -232px -6px;
}
    </style>
</head>
<body>
  <p>icon-font</p>
    <i class="iconfont icon-selected" style="color:brown;"></i>  
    <i class="iconfont icon-edit" style="color:brown;"></i>  
    <i class="iconfont icon-down" style="color:brown;"></i>  
    <i class="iconfont icon-shop" style="color:brown;"></i>  
    <i class="iconfont icon-location" style="color:brown;"></i>  
    <i class="iconfont icon-dec" style="color:brown;"></i>  
    <i class="iconfont icon-order" style="color:brown;"></i>  
    <i class="iconfont icon-noSelected" style="color:brown;"></i>  
    <i class="iconfont icon-my" style="color:brown;"></i>  
    <i class="iconfont icon-shopcart" style="color:brown;"></i>  
    <i class="iconfont icon-right" style="color:brown;"></i>  
    <i class="iconfont icon-add" style="color:brown;"></i>  
    <i class="iconfont icon-right" style="color:brown;"></i>  
    <i class="iconfont icon-home" style="color:brown;"></i>  
    <i class="iconfont icon-delete" style="color:brown;"></i>  
  <p>精灵图</p>
  <p>原图</p>
  <div class="all"></div>
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</body>
</html>